﻿///<reference path="~/Scripts/scene.dataservice.js" />
///<reference path="~/Scripts/scene.tile.binder.js" />
///<reference path="~/Scripts/scene.tile.renderer.js" />
///<reference path="~/Scripts/scene.startup.js" />
var sceneStateManager = function () {
    var sceneId = 0,
    animateSpeed = 760,
    tiles,

    // Build tiles without data only frame div with droppable functionality
    init = function (args) {
        tiles = args.tiles;

        $(tiles).each(function (index) {
           
            var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId });
            tileDiv.css('border-top', '8px solid ' + this.scenes[sceneId].borderColor);
           
            tileDiv.data(this);

            moveTile(tileDiv, this.scenes[sceneId]);
            tileDiv.appendTo('#content');

            if (index < 8) {
                tileDiv.addClass('top-row');
            }

            tileDiv.draggable({ opacity: 0.9, zIndex: 5000, revert: 'invalid', revertDuration: 500});
            setDroppable(tileDiv);
            
            tileDiv.dblclick(function () {
                var biggestDiv = $(this);
                $('div.tile').each(function () {
                    if ($(this).height() > biggestDiv.height())
                        biggestDiv = $(this);
                });
                
                swapTiles(biggestDiv, $(this));
            });
        });               
    },

    setDroppable = function (object)
    {
        object.droppable({
            tolerance: 'pointer',
            drop: function (event, ui) {
                if (ui.draggable.data().scenes != null) {
                    swapTiles(ui.draggable, $(this));
                }
            }
        });
    },

    renderTiles = function (login) {
        dataService.getAccountFull(login, renderAccountTiles);
        renderNewGame();
        renderBestPlayers();
        renderDefaultTiles();
        renderLastGame();
        renderStatistics();
    },

    renderAccountTiles = function (data) {
        renderTile(data, $('#YourAccount'), 0);
    },

    renderNewGameTiles = function (data) {
        renderTile(data, $('#NewGame'), 0);
    },
        
    renderBestPlayersTiles = function (data) {
        renderTile(data, $('#BestPlayers'), 0);
    },
        
    renderStatisticsTiles = function (data) {
        renderTile(data, $('#Statistics'), 0);
    },
        
    renderLastGameTiles = function (data) {
        renderTile(data, $('#LastGame'), 0);
    },

    renderNewGame = function () {
        var login = startup.getLogin();
        dataService.getNewGame(login, renderNewGameTiles);
    },

    renderYourAccount = function () {
        var login = startup.getLogin();
        dataService.getAccountFull(login, renderAccountTiles);
    },
        
    renderBestPlayers = function () {
        var login = startup.getLogin();
        dataService.getBestPlayers(login, renderBestPlayersTiles);
    },
        
    renderStatistics = function () {
        var login = startup.getLogin();
        dataService.getStatistics(login, renderStatisticsTiles);
    },
        
    renderLastGame = function () {
        var login = startup.getLogin();
        dataService.getLastGame(login, renderLastGameTiles);
    },

    renderTile = function (data, tile) {
        tileBinder.bind(tile, data, tileRenderer.render);
    },

    renderDefaultTiles = function () {
        $('.tile').each(function () {
            if ($(this).data().templates == null) {
                var tileDiv = $(this);
                tileBinder.bind(tileDiv, null, tileRenderer.render);
            }
        });
    },

    swapTiles = function (source, target) {
        var sourceScene = source.data().scenes[sceneId];
        var targetScene = target.data().scenes[sceneId];

        moveTile(target, sourceScene);
        moveTile(source, targetScene);

        swapScenes(sourceScene, targetScene);

        if (sceneId == 0) {

            // handle top row scrolling
            var sourceTopRow = source.hasClass('top-row');
            var targetTopRow = target.hasClass('top-row');
            if (sourceTopRow && !targetTopRow) {
                source.removeClass('top-row');
                target.addClass('top-row');
            } else if (!sourceTopRow && targetTopRow) {
                target.removeClass('top-row');
                source.addClass('top-row');
            }
        }

        // resize
        var sourceSize = sourceScene.size;
        var targetSize = targetScene.size;
        if (sourceSize != targetSize) {

            target.data().scenes[sceneId].size = sourceSize;
            source.data().scenes[sceneId].size = targetSize;

            tileRenderer.render(target, sceneId);
            tileRenderer.render(source, sceneId);
        }
        
        //Clean canvas tooltips
        $('#CanvasTooltip').remove();
    },

    slideLeft = function () {
        $('.top-row').animate({ 'left': '-=250px' }, 800, function () {
            $(this).data().scenes[sceneId].left -= 250;
        });
    },

    slideRight = function () {
        $('.top-row').animate({ 'left': '+=250px' }, 800, function () {
            $(this).data().scenes[sceneId].left += 250;
        });
    },

    changeScene = function () {
        if (sceneId == 0) {
            sceneId = 1;
            //$('.scroller').hide();
            $('#gridButton').delay(Math.floor(Math.random() * 450)).attr('disabled', false).addClass('enabled');
            $('#cloudButton').delay(Math.floor(Math.random() * 450)).attr('disabled', true).removeClass('enabled');

        } else if (sceneId == 1) {
            sceneId = 0;
            //$('.scroller').show();
            $('#cloudButton').attr('disabled', false).addClass('enabled');
            $('#gridButton').attr('disabled', true).removeClass('enabled');
        }

        $('.tile').each(function () {
            var tile = $(this);
            //debugger;
            moveTile(tile, tile.data().scenes[sceneId]);
            tileRenderer.render(tile, sceneId);
        });
    },

    moveTile = function (tile, scene) {
        tile.animate({
            opacity: scene.opacity,
            top: scene.top,
            left: scene.left,
            height: scene.height,
            width: scene.width,
            zIndex: scene.z
        },
            {
                duration: animateSpeed,
                easing: "easeInOutExpo",
                step: function () { },
                complete: function () { }
            });
    },

    swapScenes = function (source, target) {
        var top = source.top,
            left = source.left,
            height = source.height,
            width = source.width,
            opacity = source.opacity,
            zindex = source.zindex;

        source.top = target.top;
        source.left = target.left;
        source.height = target.height;
        source.width = target.width;
        source.opacity = target.opacity;
        source.zindex = target.zindex;

        target.top = top;
        target.left = left;
        target.height = height;
        target.width = width;
        target.opacity = opacity;
        target.zindex = zindex;
    },
        
    getScene = function() {
        return sceneId;
    };

    return {
        init: init,
        changeScene: changeScene,
        getTiles: function() { return tiles; },
        renderTiles: renderTiles,
        renderAccountTiles: renderAccountTiles,
        renderTile: renderTile,
        swapTiles: swapTiles,
        setDroppable: setDroppable,
        renderNewGame: renderNewGame,
        renderYourAccount: renderYourAccount,
        renderBestPlayers: renderBestPlayers,
        renderLastGame: renderLastGame,
        getScene: getScene,
};

} ();


